<template>
    <fieldset>
        <legend>产品</legend>
        <ul>
            <li v-for="item in product" :key="item.id">
                <b>产品名称:{{item.title}}</b>
                &nbsp;
                &nbsp;
                <b>价格:{{item.price}}</b>
                &nbsp;
                &nbsp;
                <b>库存:{{item.inventory}}</b>
                 &nbsp;
                &nbsp;
                <button @click="ADD_TO_CART(item)">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
    import {mapActions,mapState} from "vuex"
    export default {
        name:"product",
        methods:{
            ...mapActions("Product",['FETCH_PRODUCT']),
            ...mapActions('Cart',["ADD_TO_CART"])
        },
        computed:{
            ...mapState('Product',['product'])
        },
        mounted(){
            this.FETCH_PRODUCT()
        }
    }
</script>
<style scoped>
    ul {
        list-style:none;
    }
</style>